<template>
    <view class="container">
        <!-- 搜索栏 -->
        <view class="search-bar">
            <div class="search-content p-[24rpx]" @click="handleSearch">
                <input
                    type="text"
                    placeholder="请输入关键词"
                    class="search-input"
                    confirm-type="search"
                />
                <view class="search-btn">
                    <img
                        class="search-icon"
                        src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201739%402x.png"
                    />
                </view>
            </div>
        </view>

        <!-- 设计师部分 -->
        <view class="designer-section">
            <view class="section-header">
                <text class="section-title">设计师</text>
                <text class="more-link" @click="handleSearch('designer')">更多</text>
            </view>

            <view class="designer-grid">
                <view
                    v-for="(designer, index) in homeData.hotDesigners"
                    :key="index"
                    class="designer-item"
                    @click="handleDesignerClick(designer)"
                >
                    <div class="relative">
                        <image
                            :src="designer.avatar"
                            class="designer-avatar"
                        ></image>
                        <view class="designer-tag" v-if="designer.tag">{{ designer.tag }}</view>
                    </div>
                    <text class="designer-name truncate">{{
                        designer.nickname
                    }}</text>
                </view>
            </view>
        </view>

        <!-- 促销活动入口 -->
        <view class="promo-section" v-if="false">
            <image
                src="https://picsum.photos/seed/promo/750/200.jpg"
                class="promo-image"
                mode="heightFix"
            ></image>
        </view>

        <!-- 热销甄选 -->
        <view class="designer-section product-section">
            <view class="section-header">
                <text class="section-title">热销甄选</text>
                <text class="more-link" @click="handleSearch('product')">更多</text>
            </view>

            <view class="product-grid">
                <GoodItem
                    v-for="(product, index) in homeData.hotProducts"
                    :key="index"
                    class="product-card"
                    :product="product"
                >
                </GoodItem>
            </view>
        </view>

        <!-- 发布按钮 -->
        <view class="publish-btn" @tap="handlePublish">
            <image class="push-paper-plane" src="https://cos.aitshirt.cn/app-icon/feiji.png"></image>
          <div class="push-txt">去发布</div>
        </view>
    </view>
</template>

<script lang="ts" setup>
import GoodItem from "@/components/good/GoodItem.vue";
import { onMounted, shallowReactive } from "vue";
import { getHomeData } from "@/api/public";
import { useRouter } from 'uni-mini-router';
import { onShow } from "@dcloudio/uni-app";
const router = useRouter();

const homeData = shallowReactive({
  hotDesigners: [],
  hotProducts: [],
})

  onShow(() => {
    getHomeData().then(res => {
      // console.log(res)
      homeData.hotDesigners = res.data.hotDesigners
      homeData.hotProducts = res.data.hotProducts
    })
  })

const handleSearch = (type) => {
  router.push({
    path: '/pages/search/search?type='+type,
  });
};
function toggleFavorite(index) {
    products[index].isFavorite = !products[index].isFavorite;
}

function handlePublish() {
  router.pushTab({
    path: '/pages/design/index',
    query: {
    },
  });
}

const handleDesignerClick = (designer) => {
    router.push({
        path: '/pages/designer/main',
        query: {
            id: designer.uid,
        },
    });
};

</script>
<style lang="scss">
.container {
    width: 100vw;
    background-color: #f8f8f8;
    min-height: 100vh;
}
/* 搜索栏样式 */
.container .search-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 88rpx;
    background: #ffffff;
    box-shadow: 0rpx 1rpx 0rpx 2rpx #e7e7e7;
    padding: 8rpx 0 !important;
    box-sizing: content-box;
    .search-content {
        width: calc(100% - 48rpx);
        height: 72rpx;
        display: flex;
        align-items: center;
        background: #f3f7f8;
        border-radius: 8rpx;
        box-sizing: border-box;
      padding: 0 16px;
        .search-input {
            flex: 1;
            height: 38rpx;
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
            line-height: 38rpx;
        }

        .search-btn {
            .search-icon {
                width: 32rpx;
                height: 32rpx;
            }
        }
    }
}

.container .designer-section {
    margin: 8rpx 16rpx !important;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 32rpx 16rpx 24rpx !important;

    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 32rpx;
        .section-title {
            position: relative;
            font-weight: bold;
            font-size: 28rpx;
            color: #222222;

            &:after {
                position: absolute;
                content: '';
                bottom: -0rpx;
                left: 0;
                width: 72rpx;
                height: 4rpx;
                background: #f25a27;
                border-radius: 4rpx 4rpx 4rpx 4rpx;
            }
        }

        .more-link {
            width: 114rpx;
            height: 40rpx;
            background: #f3f7f8;
            border-radius: 24rpx 24rpx 24rpx 24rpx;
            font-weight: 400;
            font-size: 20rpx;
            color: #222222;
            line-height: 40rpx;
            text-align: center;
        }
    }

    .designer-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 20rpx;

        .designer-item {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;

            .designer-avatar {
                display: block;
                flex-shrink: 0;
                min-width: 80rpx;
                min-height: 80rpx;
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                margin: 0 auto;
            }

            .designer-tag {
                position: absolute;
                bottom: -4rpx;
                left: 50%;
                transform: translate(-50%, 0%);
                height: 28rpx;
                background: #ffffff;
                border-radius: 14rpx;
                border: 2rpx solid #f25a27;
                font-weight: 400;
                font-size: 16rpx;
                color: #222222;
                line-height: 28rpx;
                text-align: center;
                padding: 0 10rpx;
                white-space: nowrap;
            }

            .designer-name {
                width: 100%;
                height: 32rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: #222222;
                line-height: 32rpx;
                text-align: center;
                margin-top: 8rpx;
            }
        }
    }
}

.promo-section {
    margin: 16rpx;
    height: 88rpx;
    padding: 8rpx 16rpx;
    background: #ffffff;
    .promo-image {
        width: 100%;
        height: 92rpx;
        margin: 0 auto;
    }
}

.product-section {
    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      grid-row-gap: 16rpx;

    }
}
.publish-btn {
  position: fixed;
  bottom: 50rpx;
  right: 16rpx;
  width: 104rpx;
  height: 104rpx;
  background: #F25A27;
  box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .push-paper-plane {
    width: 38rpx;
    height: 36rpx;
    margin: 4rpx;
  }
  .push-txt {
    font-weight: 400;
    font-size: 20rpx;
    color: #FFFFFF;
  }
}
</style>
